<template>
  <div class="card_box">
    <template v-for="item in growCardList" :key="item.title">
      <Card size="small" :loading="loading" :title="item.title" class="card">
        <template #extra>
          <Tag :color="item.color" class="card_title">{{ item.action }}</Tag>
        </template>
        <div class="py-4 px-4 flex justify-between items-center">
          <!-- <CountTo prefix="" :startVal="0" :endVal="item.value" class="text-2xl" /> -->
          <span style="margin-left: 6px">{{ item.value ? item.value : 0 }}</span>
          <Icon :icon="item.icon" :size="40" />
        </div>
        <div>
          <span>金</span>
          <span style="margin-left: 10px">额：</span>
          <span style="margin-left: 6px">${{ item.total ? item.total : 0 }}</span>
          <!-- <CountTo prefix="$" :startVal="0" :endVal="item.total" /> -->
          <span style="margin-left: 6px">万元</span>
        </div>
      </Card>
    </template>
  </div>
</template>
<script lang="ts" setup>
  import { CountTo } from '/@/components/CountTo/index';
  import { Icon } from '/@/components/Icon';
  import { Tag, Card } from 'ant-design-vue';
  import { onMounted, ref, Ref } from 'vue';
  import { getNumbers, getMoneyNumbers } from './helper/api';
  import { useMessage } from '/@/hooks/web/useMessage';
  const { createMessage } = useMessage();
  interface GrowCardItem {
    icon: string;
    title: string;
    value: number;
    total: number;
    color: string;
    action: string;
  }
  const growCardList: GrowCardItem[] = [
    {
      title: '项目数',
      icon: 'visit-count|svg',
      value: 0,
      total: 0,
      color: 'green',
      action: '本月',
    },
    {
      title: '项目数',
      icon: 'total-sales|svg',
      value: 0,
      total: 0,
      color: 'blue',
      action: '本年',
    },
    {
      title: '项目数',
      icon: 'transaction|svg',
      value: 0,
      total: 0,
      color: 'purple',
      action: '累计',
    },
  ];

  defineProps({
    loading: {
      type: Boolean,
    },
  });
  onMounted(() => {
    geAllData();
  });
  const getMounth = () => {
    return new Promise(resolve => {
      getMoneyNumbers('1', '1').then(res => {
        resolve(res);
      });
    });
  };
  const getYear = () => {
    return new Promise(resolve => {
      getMoneyNumbers('2', '1').then(res => {
        resolve(res);
      });
    });
  };
  const getAll = () => {
    return new Promise(resolve => {
      getMoneyNumbers('3', '1').then(res => {
        resolve(res);
      });
    });
  };
  const geAllData = () => {
    const convertToNumber = value => {
      // 检查值是否存在并且是字符串类型，如果是，则转换为数字
      return typeof value === 'string' ? Number(value) : value;
    };

    const handleResponse = (index, response, defaultValue) => {
      console.log('response', response);
      if (response.code === 200 && response.data.dataList && response.data.dataList.length > 0) {
        const dataList = response.data.dataList[0];
        growCardList[index].value = convertToNumber(dataList.projectsNumber);
        growCardList[index].total = convertToNumber(dataList.money);
      } else {
        growCardList[index].value = defaultValue;
        growCardList[index].total = defaultValue;
      }
    };
    Promise.all([getMounth(), getYear(), getAll()])
      .then(res => {
        console.log('res', res);
        if (res && res[0]) {
          growCardList[0].value = convertToNumber(res[0].data.dataList[0].projectsNumber);
          growCardList[0].total = convertToNumber(res[0].data.dataList[0].money);
        }
        if (res && res[1]) {
          growCardList[1].value = convertToNumber(res[1].data.dataList[0].projectsNumber);
          growCardList[1].total = convertToNumber(res[1].data.dataList[0].money);
        }
        if (res && res[2]) {
          growCardList[2].value = convertToNumber(res[2].data.dataList[0].projectsNumber);
          growCardList[2].total = convertToNumber(res[2].data.dataList[0].money);
        }
        // handleResponse(0, res[0], 0);
        // handleResponse(1, res[1], 1);
        // handleResponse(2, res[2], 2);
        // growCardList[0].total = 111111;
      })
      .catch(err => {
        console.log('err', err);
      });
  };
</script>
<style lang="less" scoped>
  .card_box {
    display: flex;
    width: 100%;
  }
  .card {
    width: 33%;
    margin: 10px 10px;
  }
  .card_title {
    text-align: center;
  }
</style>
